<!-- 题干 -->
<template>
	<view>
		<view v-if="isScene">
			<view class="content-main" :style="{ height: heightContainer}">
				<text class="parent-desc">
					{{subject.subjectParentDesc}}
				</text>
			</view>
			<auto-img v-if="subject.subjectParentContentType=='2'" :src="subject.subjectParentContentUrl"></auto-img>
			<video v-if="subject.subjectParentContentType=='3'" :src="subject.subjectParentContentUrl"></video>
			<audio v-if="subject.subjectParentContentType=='4'" :src="subject.subjectParentContentUrl"></audio>
			<view class="edging">
				<view @click="toggle" :class="['arrow',foldSubject?'arrow-down':'']"></view>
				<view class="slip"></view>
				<view class="h"></view>
			</view>
		</view>
		<view>
			{{subject.subjectNum}}、<text class="choice-type">【{{choiceType}}】</text>{{subject.content}}
		</view>
		<auto-img v-if="subject.contentType=='2'" :src="subject.contentUrl"></auto-img>
		<video v-if="subject.contentType=='3'" :src="subject.contentUrl"></video>
		<audio v-if="subject.contentType=='4'" :src="subject.contentUrl"></audio>
	</view>
</template>

<script>
	import {
		isEmpty
	} from '@/utils/index'
	import AutoImg from '@/pages/exam/fragments/AutoImg';
	export default {
		components: {
			AutoImg
		},
		props: {
			subject: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				foldSubject: false,
				domHeihgt: '',
				heightContainer: '',
			}
		},
		computed: {
			isScene() { //是否是情景题
				return !isEmpty(this.subject.subjectParentDesc);
			},
			//选择类型
			choiceType(){
				if(isEmpty(this.subject.type)){
					return '';
				}else{
					return ({
						"1": "判断题",
						"2": "单选题",
						"3": "多选题",
						"4": "情景题",
						"5": "简答题",
						"6": "论述题",
						"7": "案例分析"
					})[this.subject.type]
				}
			}
			
		},
		methods: {
			toggle() {
				this.foldSubject = !this.foldSubject;
				if (this.foldSubject) {
					this.dynaHeight();
				} else {
					this.heightContainer = this.domHeihgt + 'px'
				}
			},
			dynaHeight() { //计算隐藏和显示后的标签高度
				this.getHeight();
				let height = this.foldSubject ? this.domHeihgt / 3 : this.domHeihgt;
				this.heightContainer = height + 'px'
			},
			getHeight() { //实时获取元素高度  苹果手机好像支持不了，没有效果
				let dom = uni.createSelectorQuery().selectAll(`.${'content-main'}`);
				dom.boundingClientRect(rect => {}).exec(e => {
					if (e[0][0]) {
						this.domHeihgt = e[0][0].height;
					}
				});
			},
		}

	}
</script>

<style lang="scss" scoped>
	.content {
		font-size: 30upx;
		padding: 30upx 30upx;

		&-main {
			display: flex;
			/*height:400upx;*/
			/*flex-wrap: wrap;*/
			// margin-bottom: 20upx;
			overflow: hidden;
		}

		&-sub {
			color: #000;
			font-weight: bold;
			overflow-y: auto;
		}

		&-swapper {
			margin-bottom: 90upx;
		}
	}

	.question-stem {
		border-radius: 8rpx;
		box-shadow: 0 0 10upx #eaeaea;
		padding: 30upx 30upx;
		font-size: 30upx;
		margin-bottom: 40upx;
	}

	.parent-desc {
		color: #000;
		font-weight: bold;
		overflow-y: auto;
	}

	.edging {
		position: relative;
		height: 34upx;
		margin-bottom: 20upx;
	}

	.arrow {
		width: 56upx;
		height: 56upx;
		z-index: 10;
		background-image: url('~@/static/img/mine/arrow.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		// bottom: -32upx;
		right: 40upx;

		&.arrow-down {
			z-index: 10;
			background-image: url('~@/static/img/mine/arrow-down.png');
			background-repeat: no-repeat;
		}
	}
	.choice-type{
		color: #5ea1f8;
	}
</style>
